<template>
    <ul class="vue-node">
        <li class="vue-node-single">
            <!-- 根节点 -->
            <div v-if="level === 1" :class="['root-node', 'node-level-' + level]">
                <slot name="root" :row="currentData" :handleExpand="handleExpand" :expand="currentData.expand">
                    <div class="root-content">
                        <div class="expand-wrapper" @click="handleExpand">
                            <div class="expand-status">
                                <div class="tips">
                                    <img
                                        :class="currentData.expand ? 'open' : 'close'"
                                        :src="images[!currentData.expand ? 0 : 1]"
                                    />
                                    <img class="icon" :src="images[2]" />
                                </div>
                            </div>
                            <div class="detail-content">
                                <span class="title">{{ currentData.label }}</span>
                            </div>
                        </div>
                        <vue-input class="search" v-model="name" placeholder="请输入名称" @change="request" />
                    </div>
                </slot>
                <transition name="dropdown" mode="out-in">
                    <div v-if="currentData.expand">
                        <tree-node
                            class="child-node"
                            v-for="(item, index) in currentData.children"
                            :key="index"
                            :data="item"
                            :level="level + 1"
                            :branchAlias="branchAlias"
                        >
                            <template #root="scoped">
                                <slot name="root" v-bind="scoped"></slot>
                            </template>
                            <template #branch="scoped">
                                <slot name="branch" v-bind="scoped"></slot>
                            </template>
                            <template #leaf="scoped">
                                <slot name="leaf" v-bind="scoped"></slot>
                            </template>
                        </tree-node>
                    </div>
                </transition>
            </div>
            <!-- 分支节点 -->
            <div
                v-else-if="branchAlias ? currentData[branchAlias] : currentData.children && currentData.children.length"
                :class="['branch-node', 'node-level-' + level]"
            >
                <slot name="branch" :row="currentData" :handleExpand="handleExpand" :expand="currentData.expand">
                    <div class="branch-content node-content" @click="handleExpand">
                        <div class="expand-status">
                            <div class="tips">
                                <img
                                    :class="currentData.expand ? 'open' : 'close'"
                                    :src="images[!currentData.expand ? 3 : 4]"
                                />
                            </div>
                        </div>
                        <div class="detail-content">
                            <span class="title">{{ currentData.label }}(共{{ currentData.children.length }}份)</span>
                        </div>
                    </div>
                </slot>
                <transition name="dropdown" mode="out-in">
                    <div v-if="currentData.expand">
                        <tree-node
                            class="child-node"
                            v-for="(item, index) in currentData.children"
                            :key="index"
                            :data="item"
                            :level="level + 1"
                            :branchAlias="branchAlias"
                        >
                            <template #root="scoped">
                                <slot name="root" v-bind="scoped"></slot>
                            </template>
                            <template #branch="scoped">
                                <slot name="branch" v-bind="scoped"></slot>
                            </template>
                            <template #leaf="scoped">
                                <slot name="leaf" v-bind="scoped"></slot>
                            </template>
                        </tree-node>
                    </div>
                </transition>
            </div>
            <!-- 叶子节点 -->
            <div v-else :class="['leaf-node', 'node-level-' + level]">
                <slot name="leaf" :row="currentData">
                    <div class="leaf-content node-content">
                        <div class="text">
                            <div class="title">{{ currentData.label }}</div>
                            <div class="sub-title">{{ currentData.label }}</div>
                        </div>
                        <div class="handle" v-if="!currentData.children || !currentData.children.length">
                            <button class="button">xxx</button>
                            <button class="button">xxxxx</button>
                        </div>
                    </div>
                </slot>
            </div>
        </li>
    </ul>
</template>

<script lang="ts" setup name="TreeNode">
import { defineProps, defineOptions, defineEmits, ref, Transition } from 'vue'
import VueInput from '../../input/index'
const { data, level, branchAlias } = defineProps({
    data: {
        type: Object,
        default: () => ({})
    },
    level: {
        type: Number,
        default: 0
    },
    branchAlias: {
        type: String,
        default: ''
    }
})
const images = [
    '',
    '',
    '',
    '',
    '',
    ''
]
const currentData = ref(data)
const emitEvent = defineEmits<{ 'on-toggle-expand': [Object] }>()
const handleExpand = () => {
    currentData.value.expand = !currentData.value.expand
    emitEvent('on-toggle-expand', currentData)
}
const name = ref('')
const request = () => {
    emitEvent('change', name)
}
defineOptions({
    name: 'TreeNode'
})
</script>
<script lang="ts">
export default {
    name: 'TreeNode'
}
</script>
<style>
.dropdown-enter-active,
.dropdown-leave-active {
    transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
}
</style>
<style lang="scss">
@import '../../config.scss';
@import '../../common.scss';

.#{$prefix}-node {
    width: 100%;
    padding: 0;
    margin: 0;
    padding-right: 0;
    margin-bottom: 20px;

    &.child-node {
        margin-bottom: 0;
    }

    .#{$prefix}-node-single {
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;

        .root-node {
            .root-content {
                display: inline-block;
                width: 100%;
                height: 85px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                background: #e5e6ff;
                border-radius: 12px 12px 12px 12px;
                position: relative;
                @include content-middle();

                &.light-blue {
                    background: #ebf4fe;

                    .expand-wrapper {
                        width: 100%;
                    }
                }

                .expand-wrapper {
                    width: calc(100% - 390px);
                    display: inline-block;
                    vertical-align: middle;

                    .expand-status {
                        cursor: pointer;
                        margin-left: 24px;
                        display: inline-block;

                        .tips {
                            display: inline-block;
                            vertical-align: middle;

                            .close {
                                height: 24px;
                                width: 24px;
                                vertical-align: middle;
                            }

                            .icon {
                                margin: 0 16px;
                                height: 44px;
                                width: 44px;
                                vertical-align: middle;
                            }
                        }
                    }

                    .detail-content {
                        text-align: left;
                        font-style: normal;
                        vertical-align: middle;
                        display: inline-block;
                        width: calc(100% - 150px);

                        .title {
                            font-weight: 600;
                            font-size: 32px;
                            color: #244367;
                            display: inline-block;
                            width: 100%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            vertical-align: middle;
                            word-break: break-all;
                            @include ellipsis();

                            &.ellipsis-2 {
                                @include ellipsis(2);
                            }

                            &.ellipsis-3 {
                                @include ellipsis(3);
                            }
                        }
                    }
                }

                .suggest {
                    left: 0;
                    margin-top: 10px;
                }
            }
        }

        .branch-node {
            .branch-content {
                display: inline-block;
                width: 100%;
                height: 72px;
                background: #ffffff;
                border-radius: 0px 0px 0px 0px;
                border-bottom: 1px solid #eef2f6;
                box-sizing: border-box;

                @include content-middle();

                .expand-status {
                    cursor: pointer;
                    margin: 0 16px 0 24px;
                    display: inline-block;

                    .tips {
                        .close {
                            height: 24px;
                            width: 24px;
                            vertical-align: middle;
                        }

                        .open {
                            height: 24px;
                            width: 24px;
                            vertical-align: middle;
                        }

                        .icon {
                            margin: 0 16px;
                            height: 44px;
                            width: 44px;
                            vertical-align: middle;
                        }
                    }
                }

                .detail-content {
                    font-weight: 600;
                    font-size: 32px;
                    color: #244367;
                    display: inline-block;
                    vertical-align: middle;

                    .title {
                        font-weight: 400;
                        font-size: 28px;
                        color: #293957;
                        word-break: break-all;
                    }
                }
            }
        }

        .leaf-node {
            &.node-level-2 {
                .leaf-content {
                    padding-left: 64px;
                }
            }

            .leaf-content {
                font-weight: 600;
                font-size: 32px;
                color: #244367;
                text-align: left;
                font-style: normal;
                text-transform: none;
                vertical-align: middle;
                display: flex;
                background: #ffffff;
                border-bottom: 1px solid #eef2f6;
                min-height: 92px;

                .text {
                    margin: 16px 0;
                    width: 270px;

                    .title {
                        font-weight: 400;
                        font-size: 28px;
                        color: #293957;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        max-width: 269px;
                        word-break: break-all;
                    }

                    .tips {
                        font-weight: 400;
                        font-size: 20px;
                        color: #ff5656;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        margin-top: 8px;
                    }
                }

                .handle {
                    width: calc(100% - 270px);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 16px 20px;

                    .button {
                        padding: 0 30px;
                        height: 60px;
                        background: #eaf2ff;
                        border-radius: 50px 50px 50px 50px;
                        font-weight: 400;
                        font-size: 26px;
                        color: #2f79fc;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        border: none;
                    }
                }
            }
        }
    }

    .node-level-1 {
        .branch-content {
            padding-left: 0;
        }

        .leaf-content {
            padding-left: 40px;
        }
    }

    .node-level-2 {
        .branch-content {
            padding-left: 40px;
        }

        .leaf-content {
            padding-left: 104px;
        }
    }

    .node-level-3 {
        .branch-content {
            padding-left: 80px;
        }

        .leaf-content {
            padding-left: 100px;
        }
    }
    .node-level-4 {
        .branch-content {
            padding-left: 120px;
        }

        .leaf-content {
            padding-left: 100px;
        }
    }
    .node-level-5 {
        .branch-content {
            padding-left: 160px;
        }

        .leaf-content {
            padding-left: 100px;
        }
    }
    .node-level-6 {
        .branch-content {
            padding-left: 200px;
        }

        .leaf-content {
            padding-left: 100px;
        }
    }
}
</style>
